import styles from './waterfall.module.css'
import ImageCard from '@/components/ImageCard'
import { useInfiniteScroll } from '@/hooks/useIntersectionObserver'

const Waterfall = (props) => {
    const {
        articles,
        fetchMore
    } = props

    // 使用无限滚动 hook
    const loaderRef = useInfiniteScroll(fetchMore);

    return (
        <>
        <div className={styles.wrapper}>
            <div className={styles.column}>
                {
                    articles.filter((_, i) => i % 2 === 0).map(article => (
                        <ImageCard key={article.id} {...article} />
                    ))
                }
            </div>
            <div className={styles.column}>
                {
                    articles.filter((_, i) => i % 2 !== 0).map(article => (
                        <ImageCard key={article.id} {...article} />
                    ))
                }
            </div>
            <div ref={loaderRef} className={styles.loader}>加载中...</div>
        </div>
        </>
    )
}

export default Waterfall